<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<style type="text/css">
	.highligth{
		background-color: yellow;
	}
	</style>
<body>
	<p>hello</p>
	<ul>
		<li><i>one</i></li>
		<li><span>two</span></li>
		<li><strong>three</strong></li>
	</ul>
	<div id="xx">xuxuan</div>
</body>

<script type="text/javascript">

	var $body = $("body").children();
	// for(var i=0; i<$body.length; i++){
	// 	alert($body[i].nodeType);
	// }
	var $p = $("p").children();
	var $ul = $("ul").children();
	// alert($body.length);
	// alert($p.length);
	// alert($ul.length);
	for(var i=0; i<$ul.length; i++){
		// alert($ul[i].innerHTML);
		// alert($($ul[i]).html());
		// alert($($ul[i]).text());
	}

	// $ul.each(function(index,o){
	// 	$(o).wrapInner("<div></div>");
	// });
	// $("ul li").each(function(index,o){
	// 	$(o).wrapInner("<span></span>");
	// });

// $(document).bind("click",function(event){
// 	$(event.target).closest("li").toggleClass("highligth");
// });

// $("li").parent().css("background","yellow");

// var offset = $("#xx").offset();
// alert(offset.left);
// alert(offset.top);

var $p = $("p");
var scrollTop = $p.scrollTop();
var scrollLeft = $p.scrollLeft();
alert(scrollTop+" "+scrollLeft)
</script>
</html>